<!-- TODO: 这个页面后续将用 JSX 重构 -->
<template>
    <div class="attr-list">
        <el-form>
            <el-collapse accordion>
                <el-collapse-item title="通用样式">
                    <currency :textAlignOptions='textAlignOptions' :borderStyleOptions="borderStyleOptions" :verticalAlignOptions="verticalAlignOptions" :styleKeys="styleKeys" :curComponent="curComponent" :selectKey="selectKey" :excludes="excludes"></currency>
                </el-collapse-item>
                <el-collapse-item title="组件样式">
                    <!-- 矩形 -->
                    <rectshape :curComponent="curComponent"></rectshape>
                    <!-- 文字 -->
                    <customText :curComponent="curComponent"></customText>
                    <!-- 图片 -->
                    <Picture :curComponent="curComponent"></Picture>
                    <el-form-item v-if="curComponent.propValue.value=='Header'" >
                        <el-form-item class="flex-align">选中背景色： <el-color-picker v-model=" curComponent.propValue.activeBg" show-alpha></el-color-picker> </el-form-item>
                        <el-form-item class="flex-align">选中文字颜色： <el-color-picker v-model=" curComponent.style.activeColor" show-alpha></el-color-picker> </el-form-item>
                    </el-form-item>
                    <!-- 列表多图 -->
                    <el-form-item v-if="curComponent.propValue.value=='ListDialog'" label="列表配置">
                    <div style="clear:both;" class="flex">背景图链接：  <el-input style="width:200px" v-model="curComponent.propValue.backgroundImage"></el-input> </div>
                    <div class="flex">背景渐变开始： <el-color-picker v-model=" curComponent.propValue.backgroundColor.left" show-alpha></el-color-picker> </div>
                    <div class="flex">背景渐变结束： <el-color-picker v-model=" curComponent.propValue.backgroundColor.right" show-alpha></el-color-picker> </div>
                    </el-form-item>

                     <!-- web在线定位表单 -->
                    <VFrom :curComponent="curComponent"></VFrom>
                    <!-- 图册目录 -->
                    <AtlasDialog :curComponent="curComponent"></AtlasDialog>
                    <!-- 轮播图 -->
                    <vswiper :curComponent="curComponent"></vswiper>
                    <!-- 横幅轮播 -->
                    <swiperList :curComponent="curComponent"></swiperList>
                    <!-- 优势组件 -->
                    <Advantage :curComponent="curComponent"></Advantage>
                    <!-- 列表卡片组件 -->
                    <Listcard :curComponent="curComponent"></Listcard>
                    <!-- 移入效果组件 -->
                    <vhover :curComponent="curComponent"></vhover>
                    <!-- 案列卡片 -->
                    <Casecard :curComponent="curComponent"></Casecard>
                    <!-- tab切换卡片 -->
                    <el-form-item v-if="curComponent.propValue.value=='TabSwitchcard'||curComponent.propValue.value=='MobileSwitchcard'" label="tab卡片配置">
                        <TabSwitchcard :curComponent="curComponent"></TabSwitchcard>
                    </el-form-item>

                     <el-form-item v-if="curComponent.propValue.value=='TabImgSwitchcard'" label="tab卡片配置">
                        <TabSwitchcard :curComponent="curComponent"></TabSwitchcard>
                    </el-form-item>

                    <!-- 移动端网页头部 -->
                    <MobileHeader :curComponent="curComponent"></MobileHeader>
                    <!-- 移动端footer配置 -->
                    <MobileFooter :curComponent="curComponent"></MobileFooter>
                    <!-- 移动端在线表单 -->
                    <MobileForm :curComponent="curComponent"></MobileForm>
                    <!-- 移动端横向滑动 -->
                    <MobileScrollx :curComponent="curComponent"></MobileScrollx>

                </el-collapse-item>
            </el-collapse>


        </el-form>
    </div>
</template>

<script>
import { styleData } from '@/utils/style'
import Upload from '../components/Upload/index.vue'
import TabSwitchcard from '../components/AttrListItem/TabSwitchcard.vue'
import currency from '../components/AttrListItem/currency.vue'
import rectshape from '../components/AttrListItem/rect-shape.vue'
import Picture from '../components/AttrListItem/Picture.vue'
import AtlasDialog from '../components/AttrListItem/AtlasDialog.vue'
import vswiper from '../components/AttrListItem/v-swiper.vue'
import swiperList from '../components/AttrListItem/swiperList.vue'
import Advantage from '../components/AttrListItem/Advantage.vue'
import Listcard from '../components/AttrListItem/Listcard.vue'
import Casecard from '../components/AttrListItem/Casecard.vue'
import vhover from '../components/AttrListItem/v-hover.vue'
import customText from '../components/AttrListItem/customText.vue'

import MobileHeader from '../components/AttrListItem/MobileHeader.vue'
import MobileFooter from '../components/AttrListItem/MobileFooter.vue'
import MobileForm from '../components/AttrListItem/MobileForm.vue'
import MobileScrollx from '../components/AttrListItem/MobileScrollx.vue'
import VFrom from '../components/AttrListItem/VFrom.vue'
// 轮播内嵌配置
// import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// import '@wangeditor/editor/dist/css/style.css'

export default {
  components: { Upload, TabSwitchcard, currency, rectshape, Picture, MobileHeader, AtlasDialog, vswiper, swiperList, Advantage, Listcard, Casecard, vhover, MobileFooter, MobileForm, MobileScrollx, VFrom,customText},
    data() {
        return {
            excludes: ['Picture', 'Group'], // 这些组件不显示内容
            textAlignOptions: [
                {
                    label: '左对齐',
                    value: 'left',
                },
                {
                    label: '居中',
                    value: 'center',
                },
                {
                    label: '右对齐',
                    value: 'right',
                },
            ],
            borderStyleOptions: [
                {
                    label: '实线',
                    value: 'solid',
                },
                {
                    label: '虚线',
                    value: 'dashed',
                },
            ],
            verticalAlignOptions: [
                {
                    label: '上对齐',
                    value: 'top',
                },
                {
                    label: '居中对齐',
                    value: 'middle',
                },
                {
                    label: '下对齐',
                    value: 'bottom',
                },
            ],
            selectKey: ['textAlign', 'borderStyle', 'verticalAlign'],
            styleData,
        }
    },
    computed: {
        styleKeys() {
            if (this.$store.state.curComponent) {
                const curComponentStyleKeys = Object.keys(this.$store.state.curComponent.style)
                return this.styleData.filter(item => curComponentStyleKeys.includes(item.key))
            }
            return []
        },
        curComponent() {
            return this.$store.state.curComponent
        },
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
    methods:{
        confrim(res,list,i){
            list[i].url=res
        },
        confrimImg(e,data){
            data.propValue=e
        },
        addswiper(list,name){
            if(name=='v-swiper'){
                list.push({url:"",link:''})
                list.push({url:"",link:''})
            }else{
                list.push({url:"",link:''})
            }
        },
        delswiper(list,i){
            if(list.length==1){
                this.$message.error("再删就没有啦！")
                return
            }
             list.splice(i,1)
        },
        addtablist(list){
               list.push({active:false,label:'选项卡',link:''},)
        },
        deltab(list,i){
            list.splice(i,1)
        },
        onChange(e){
            console.log(this.dialogValue)
            this.swiperList[this.swiperIndex].content=this.dialogValue
        },
        setSwiperContent(swiperList,i,content){
            this.swiperList=swiperList
            this.swiperIndex=i
            this.dialogValue=content
            this.showdialog=true
        },
    }
}
</script>

<style lang="scss" scoped>
.attr-list {
    overflow: auto;
    padding: 20px;
    padding-top: 0;
    height: 100%;
}
.dialog__body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.ql-container {
  min-height: 300px;
  max-height: 600px;
}
.quill-editor {
  width: 100%;
  min-height: 200px;
  overflow-y: auto;
}
</style>
